// 拆卸管理
<template>
    <f7-page 
      ptr 
      @ptr:refresh="refresh" 
      infinite 
      :infinite-distance="50" 
      :infinite-preloader="true"
      @infinite="infinite"
      class="common-page"
    >
      <f7-navbar>
          <f7-nav-left>
              <f7-link back icon-material="chevron_left" force></f7-link>
          </f7-nav-left>
          <f7-nav-title>拆卸管理</f7-nav-title>
          <!-- 查询参数图标 -->
          <f7-nav-right @click.native="show = true">
            <img src="../../../../assets/img/qzjx/filter.png" alt="toolbar-icon" style="width: 22px;" />
          </f7-nav-right>
      </f7-navbar>
      <van-tabs @click="clickTab" v-model="tabName">
        <van-tab v-for="(item) in controlData.nodeTotalList" :key="item.code" sticky :name="item.code">
          <template #title> 
            <van-badge :content="item.num" color="#F15A5A">
              <div>{{item.name}}</div>
            </van-badge>
          </template>
          <f7-list media-list class="search-list" v-if="query.data.length > 0">
              <li v-for="(item, index) in query.data" :key="index" @click="detail(item)" class="content-box">
                  <img :src="require(`../../../../assets/img/qzjx/${item.equipmentType?item.equipmentType:'empty'}.png`)" alt="" class="left-box">
                  <div class="right-box">
                      <div class="title-box">
                        <h3>{{item.propertyCode}} <span style="color:#8995AC;font-size:14px;margin-left:5px;">【{{item.workSiteCode}}】</span></h3>
                      </div>
                      <p>{{item.engineeName||'--'}}</p>
                      <p>当前进度：{{item.handleTypeName||'--'}}</p>
                      <p>计划作业日期：<span>{{item.workPlanTime|date('yyyy-MM-dd')}}</span></p>
                      <span class="cancel-tag" v-if="item.pStatus==999">已取消</span>
                  </div>
              </li>
          </f7-list>
          <v-empty v-else description="暂无数据"></v-empty>
        </van-tab>
      </van-tabs>
    <!-- 搜索 -->
    <v-popup-search v-model="show" title="筛选" :searchData="searchData" @btn:click="searchBtn"></v-popup-search>
    <!-- 搜索 end -->
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
import Config from "@/libs/config.js";
import vPopupSearch from '@/libs/zjk/popup-search/qm-popup-search.vue'
export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: "/app/equipment/eqmDisNotify/getListModel",
            query: "/app/equipment/eqmDisNotify/query",
        };
    }

    onInit () {
        this.context.tabName=localStorage.getItem('handleType')||''
    }
    onBeforeQuery (type, conditions, params) {
        this.setSearch("handleType", this.context.tabName, "list")
        if(type=='form'){
            params.query={}
            Object.keys(this.context.search).forEach(key => {
                params['query'][key]=this.context.search[key]
            })
        }
    }
    onAfterQuery (type, isSuccess, result) {
        if(type=='form'){
            if(result.controlData.nodeTotalList){
                result.controlData.nodeTotalList.unshift({name:'全部',code:'',num:''})
            }else{
                result.controlData.nodeTotalList=[{name:'全部',code:'',num:''}]
            }
            this.$data.searchData[1].columns=result.controlData.eqmTypes
        }
        return result;
    }
    mixin () {
        return {
            components: {
                vPopupSearch,
            },
            data () {
                return {
                    tabName:'',
                    search: {
                        handleType:'',
                        equipmentType:'',
                        workPlanTimeStart:'',
                        workPlanTimeEnd:'',
                    },
                    tabList:[
                      {name:'全部',code:''},
                      {name:'拆卸告知',code:'1'},
                      {name:'作业计划',code:'2'},
                      {name:'拆卸前检查',code:'3'},
                      {name:'拆卸过程',code:'4'},
                      {name:'拆卸自检',code:'5'},
                      {name:'拆卸验收',code:'6'},
                    ],
                    query: {
                        data:[]
                    },
                    show:false,
                    typeList: [
                        {
                            key: '塔式起重机',
                            value: "crane_type_1"
                        },
                        {
                            key: '施工升降机',
                            value: "crane_type_2"
                        },
                        {
                            key: '门式起重机',
                            value: "crane_type_3"
                        },
                        {
                            key: '桥式起重机',
                            value: "crane_type_5"
                        },
                        /*{
                            key: '其它',
                            value: "other"
                        }*/
                    ],
                    // 时间选择面板
                    date: {
                        prop: "",
                        show: false,
                        current: null,
                        startTime: null,
                        endTime: null
                    },
                    // 搜索的配置
                    searchData: [
                        {
                            type: 'input2',
                            key: 'keyword',
                            placeholder: '产权备案编号、工程名称'
                        },
                        {
                            type: 'checkbox',
                            key: 'equipmentType',
                            label: '设备类型',
                            columns: [],
                        },
                        {
                            type: 'date-range',
                            label: '计划作业日期',
                            key: 'workPlanTime'
                        }
                    ],
                };
            },
            methods: {
                searchBtn ({ data }) {
                    console.log(data);
                    if(!data){
                        this.search={}
                    }else{
                        if (data.workPlanTime) {
                            let arr = data.workPlanTime.split(",");
                            data.workPlanTimeStart = arr[0];
                            data.workPlanTimeEnd = arr[1];
                        }else{
                            data.workPlanTimeStart=''
                            data.workPlanTimeEnd=''
                        }
                        // 删除workPlanTime属性，不然会报错
                        delete data.workPlanTime
                    }
                    Object.assign(this.search, data)
                    this.searchQuery(this.search, "list")
                    this.searchQuery({}, "form")
                },
                clickTab(name,title){
                    this.tabName=name
                    this.search.handleType=name
                    localStorage.setItem('handleType',name)
                    this.searchQuery(this.search,'list')
                },
                // 详情
                detail (item) {
                    this.$f7.view.current.router.navigate(
                        `/business/qzjx/disassembly/detail?notifyCaseId=${item.notifyCaseId}&notifyId=${item.notifyId}`
                    );
                },
                handleBack(){
                    localStorage.removeItem('handleType')
                    this.$f7.views.current.router.back({force:true})
                },
            },
            mounted () {
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');

</style>
